<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="../lib2/react.development.js"></script>
    <!-- //引入核心库 -->
    <script src="../lib2//react-dom.development.js"></script>
    <!-- //支持react的dom操作 -->
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
        class A extends React.Component{
            state={
                hasError:''
            }
            static getDerivedStateFromError(error){
                console.log(error)
                return {hasError:error}
                //当某子组件(必须是生命周期出错时(如render等其他的生命周期))出错时,防止页面变成空白,而使用的函数(不需要通过this去访问值)
            }
            componentDidCatch(){
                console.log('出错了,反馈给服务器,用于通知编码人员')
                //这个是出错时调用的函数
            }
           render(){
               return <div>
                <h3>我是父组件</h3>
                <h2>{this.state.hasError?<h3>当前网络不稳定</h3>:<B/>}</h2>
                </div>
           }
        }
        class B extends React.Component{
            state={
                person:'121'
                // [
                //     {name:'邹',age:20},
                //     {name:'无法',age:30},
                //     {name:'发v',age:10},
                // ]
            }
            render(){
                return <div>我是b组件
                   {
                       this.state.person.map((item,index)=>{
                     return <div key={index}>{item.name}---{item.age}</div>
                       })
                   }
                    </div>
            }
        }
        ReactDOM.render(<A/>,document.getElementById('test'))
        </script>
</body>
</html>